<template>
  <div id="app" class="cloth-store-view">
    <van-nav-bar left-arrow title="布匹库存" @click-left="comeBack" left-text="返回">
    </van-nav-bar>

    <div style="display: flex; justify-content: space-between">
      <div style="padding-left: 2vw;font-size: 1.3rem;font-weight: bolder">
        <span>成品库存</span>
      </div>
      <div style="margin-top: 0.5vh;height: 3vh;margin-right: 10vw;">
        <input style="height: 3vh;width: 30vw;" placeholder="输入颜色" v-model="queryParam.productColor" @input="loadProductStoreFn" />
      </div>
    </div>
    <product-cloth-store ref="productClothStoreRef" style="height: 40vh;border: 1px solid #8191c5;margin-left: 2vw;margin-right: 2vw;padding-bottom: 2vh;"></product-cloth-store>


    <div style="display: flex; justify-content: space-between">
      <div style="padding-left: 2vw;">
        <span style="font-size: 1.3rem;font-weight: bolder">坯布库存</span>
        <span>({{ greyClothTotalStock }})</span>
      </div>
      <div style="margin-top: 0.5vh;height: 3vh;margin-right: 10vw;">
        <input style="height: 3vh;width: 30vw;" placeholder="输入颜色" v-model="queryParam.greyColor" @input="loadGreyStoreFn" />
      </div>
    </div>
    <grey-cloth-store ref="greyClothStoreRef" style="height: 40vh;border: 1px solid #8191c5;margin-left: 2vw;margin-right: 2vw;padding-bottom: 2vh;"></grey-cloth-store>

  </div>
</template>

<script>
import {comeBack} from "@/utils";
import GreyClothStore from "@/views/warehouse/grey-cloth-store/App";
import ProductClothStore from "@/views/warehouse/product-cloth-store/App";
import {sumGreyClothStore} from "@/api/cloth";


export default {
  name: "clothStoreView",
  components: {ProductClothStore, GreyClothStore},
  data() {
    return {
      /* 查询相关 */
      queryParam: {
        keyLike: "",
        productColor: "",
        greyColor: "",
      },
      queryGreyTimer: null,
      queryProductTimer: null,

      greyClothTotalStock: 0,
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }

    // that.initFn(that);   //dev fixme
  },
  methods: {
    comeBack,

    /* 初始化 */
    initFn() {
      const that = this;

      // 监听页面消失的时候，关掉页面就可以了
      window.api.addEventListener({
        name: "viewdisappear",
      }, () =>  {
        window.api.closeWin();
      });

      that.$nextTick(() => {
        that.loadGreyStoreFn();
        that.loadProductStoreFn();
      });
    },

    /* 加载坯布仓库 */
    loadGreyStoreFn() {
      const that = this;
      clearTimeout(that.queryGreyTimer);
      that.queryGreyTimer = setTimeout(() => {
        that.$refs.greyClothStoreRef.fillQueryParamFn(window.api.pageParam.keyLike, that.queryParam.greyColor);
        that.$refs.greyClothStoreRef.loadGreyClothStoreDataFn(1);

        //坯布库存总数
        sumGreyClothStore({
          designNo: window.api.pageParam.keyLike
        }, data => {
          that.greyClothTotalStock = data;
        });
      }, 1500);
    },

    /* 加载成品仓库 */
    loadProductStoreFn() {
      const that = this;
      clearTimeout(that.queryProductTimer);
      that.queryProductTimer = setTimeout(() => {
        that.$refs.productClothStoreRef.fillQueryParamFn(window.api.pageParam.keyLike, that.queryParam.productColor);
        that.$refs.productClothStoreRef.loadProductClothStoreDataFn(1, window.api.pageParam.keyLike, that.queryParam.productColor);
      }, 1500);

    }
  }
}
</script>

<style lang="scss" scoped>
.cloth-store-view {
  height: 100%;
  ::v-deep .van-search {
    z-index: 1;
  }
  .body-scroll {
    height: 79%;
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      display: flex;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
      }
    }
  }
}
</style>